<template>
  <div class="preview_poster">
    <img ref="previewImg" :src="data.posterUrl" alt="" @load="handlePreImgLoad">
    <i class="icon icon-avatar"
      :style="{fontSize: data.iconWidth / scale + 'px', top: data.iconTop / scale + 'px', left: data.iconleft / scale + 'px'}">
    </i>
    <i class="icon icon-erweima" 
      :style="{fontSize: data.qrCodeWidth / scale + 'px', top: data.qrCodeTop / scale + 'px', left: data.qrCodeleft / scale + 'px'}">
    </i>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        scale: 1
      }
    },
    props: ['data'],
    methods: {
      handlePreImgLoad () {
        this.scale = (this.$refs.previewImg.naturalWidth) / this.$refs.previewImg.offsetWidth
      }
    }
  }
</script>
<style lang="scss">
  .preview_poster {
    &{position:relative;line-height:1;}
    img{width:100%;}
    .icon{position:absolute;}
  }
</style>
